<template>
  <div class="warehouse-list p-8">
    <!-- 顶部操作按钮栏 -->
    <el-row :gutter="16" class="mb-8">
      <el-col :span="3">
        <el-button type="primary" @click="showAddDialog = true; isEditWarehouse = false">新增仓库</el-button>
      </el-col>
    </el-row>
    <br>
    <!-- 查询区域 -->
    <el-row :gutter="16" class="mb-8">
      <el-col :span="8">
        <el-form-item label="仓库编号:">
          <el-input v-model="queryParams.WareHouseNumber"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="仓库名称:">
          <el-input v-model="queryParams.WareHouseName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="fetchWarehouseList">查询</el-button>
      </el-col>
    </el-row>

    <!-- 主体内容区域 -->
    <el-row :gutter="16">
      <!-- 右侧表格 -->
      <el-col :span="20">
        <el-table
          :data="warehouseList"
          border
          style="width: 100%; min-width: 900px; height: 400px;"
        >
          <el-table-column label="序号" prop="wareHouseID" width="60"></el-table-column>
          <el-table-column prop="wareHouseNumber" label="仓库编号" width="150"></el-table-column>
          <el-table-column prop="wareHouseName" label="仓库名称" width="150"></el-table-column>
          <el-table-column prop="category" label="所属类别"></el-table-column>
          <el-table-column prop="warehouseAddress" label="仓库地址" width="150"></el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
          <el-table-column label="操作" prop="wareHouseID">
            <template #default="{ row }">
              <el-button type="text" @click="handleDelete(row)">删除仓库</el-button>
              <el-button type="text" @click="handleUpdate(row)">修改仓库</el-button>
              <el-button type="text" @click="handleEdit(row.wareHouseID)">库位信息列表</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!-- 分页区域 -->
    <el-row class="mt-8">
      <el-col :span="24">
        <el-pagination
          v-model:current-page="page.PageIndex"
          v-model:page-size="page.PageSize"
          :page-sizes="[10, 20, 30, 50]"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total.totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>

    <!-- 新增/编辑仓库信息的对话框 -->
    <el-dialog
      v-model="showAddDialog"
      title="新增/编辑仓库信息"
      width="600px"
      @close="resetForm"
    >
      <el-form
        :model="form"
        label-width="120px"
        ref="formRef"
        :rules="rules"
      >
        <el-row>
          <el-col :span="10">
            <el-form-item label="仓库名称" prop="wareHouseName">
              <el-input v-model="form.wareHouseName" required></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="仓库编号" prop="wareHouseNumber">
              <el-input
                placeholder="保存后自动生成"
                disabled
                v-model="form.wareHouseNumber"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="*所属类别" prop="category">
              <el-input
                v-model="form.category"
                :readonly="form.ourRepresentativesInfoFilled"
                required
              >
                <template #suffix>
                  <el-button size="mini" @click="openOurRepresentativesDialog">
                    <i class="el-icon-search"></i>
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="仓库地址">
              <el-input v-model="form.warehouseAddress"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="备注">
              <el-input type="textarea" v-model="form.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="showAddDialog = false">取消</el-button>
        <el-button type="primary" @click="saveOrUpdateWarehouse">确认</el-button>
      </template>
    </el-dialog>

    <!-- 仓库类别选择对话框 -->
    <el-dialog
      v-model="ourRepresentativesDialogVisible"
      width="280px"
      title="仓库类别"
      append-to-body
    >
      <el-table
        :data="ourRepresentativesList"
        highlight-current-row
        border
        size="small"
        @current-change="handleOurRepresentativesChange"
      >
        <el-table-column type="index" label="序号" />
        <el-table-column property="wareHouseTypeName" label="类别名称" width="200" />
      </el-table>
      <template #footer>
        <el-button @click="ourRepresentativesDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="pickOurRepresentatives">确定</el-button>
      </template>
    </el-dialog>

    <!-- 库位信息对话框 -->
    <el-dialog
      v-model="AreaDialogVisible"
      width="800px"
      title="库位信息"
      class="outer-dialog"
    >
      <el-button type="success" @click="AddArea(); isEditStorageArea = false; resetStorageAreaForm()">新增库位</el-button>
      <br><br>
      <el-table
        :data="storageAreaList"
        highlight-current-row
        border
        size="small"
        @current-change="handleStorageAreaChange"
      >
        <el-table-column type="index" property="storageAreaId" label="序号" />
        <el-table-column property="storageAreaCode" label="库位编码" width="150" />
        <el-table-column property="storageAreaType" label="库位类型" width="150" />
        <el-table-column property="capacity" label="库位仓储容量" width="150" />
        <el-table-column property="storageCondition" label="库位存储条件" width="150" />
        <el-table-column property="warehouseID" label="所属仓库" width="150" >
          <template #default="{ row }">
            {{ row.warehouseID }}号仓库
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150"  fixed="right">
          <template #default="{ row }">
            <el-button type="text" @click="handleStorageAreaEdit(row)">编辑</el-button>
            <el-button type="text" @click="handleStorageAreaDelete(row)">删除</el-button>
            <el-button type="text" @click="openViewPositionDialog(row)">仓位信息列表</el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <el-button @click="AreaDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="closeAreaDialogAndHandleData">确定</el-button>
      </template>
    </el-dialog>

    <!-- 新增/编辑库位对话框 -->
    <el-dialog v-model="dialogFormVisible" title="新增/编辑库位" width="500">
      <el-form :model="formStorageArea">
        <el-form-item label="库位编码" :label-width="formLabelWidth">
          <el-input v-model="formStorageArea.StorageAreaCode" autocomplete="off" disabled placeholder="自动生成" />
        </el-form-item>
        <el-form-item label="库位类型" :label-width="formLabelWidth">
          <el-input v-model="formStorageArea.StorageAreaType" autocomplete="off" />
        </el-form-item>
        <el-form-item label="库位仓储容量" :label-width="formLabelWidth">
          <el-input v-model="formStorageArea.Capacity" autocomplete="off" />
        </el-form-item>
        <el-form-item label="库位仓储条件" :label-width="formLabelWidth">
          <el-input v-model="formStorageArea.StorageCondition" autocomplete="off" />
        </el-form-item>
        <el-form-item label="仓库" :label-width="formLabelWidth">
          <el-select v-model="formStorageArea.WarehouseID" placeholder="请选择仓库">
            <el-option
              v-for="warehouse in warehouseList"
              :key="warehouse.wareHouseID"
              :label="warehouse.wareHouseName"
              :value="warehouse.wareHouseID"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="saveOrUpdateStorageArea">确认</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 查看仓位对话框 -->
    <el-dialog v-model="viewPositionDialogVisible" title="查看仓位" width="800" class="inner-dialog">
      <el-button type="success" @click="openAddPositionDialog(); isEditPosition = false; resetPositionForm()">新增仓位</el-button>
      <br><br>
      <el-table
        :data="positionList"
        highlight-current-row
        border
        size="small"
      >
        <el-table-column label="主键" property="locationID" />
        <el-table-column property="locationCode" label="仓位编码" width="150" />
        <el-table-column property="locationType" label="仓位类型" width="150" />
        <el-table-column property="locationSize" label="仓位尺寸" width="150" />
        <el-table-column property="weightLimit" label="仓位承重限制" width="150" />
        <el-table-column property="currentStatus" label="当前状态" width="150" >
          <template #default="{row}">
            {{ row.currentStatus === 1 ? '禁用' : '启用' }}
          </template>
        </el-table-column>
        <el-table-column property="storageAreaID" label="所属库位主键" width="150" >
          <template #default="{row}">
            {{ row.storageAreaID }}号库位
          </template>
        </el-table-column>
        <el-table-column label="操作" property="locationID" width="150"  fixed="right">
          <template #default="{row}">
            <el-button type="text" @click="openEditPositionDialog(row)">编辑</el-button>
            <el-button type="text" @click="deletePosition(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <el-button @click="viewPositionDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>

    <!-- 新增/编辑仓位对话框 -->
    <el-dialog v-model="addPositionDialogVisible" title="新增/编辑仓位" width="500" class="inner-dialog">
      <el-form :model="formPosition">
        <el-form-item label="仓位编码" :label-width="formLabelWidth">
          <el-input v-model="formPosition.locationCode" autocomplete="off" disabled placeholder="自动生成" />
        </el-form-item>
        <el-form-item label="仓位类型" :label-width="formLabelWidth">
          <el-input v-model="formPosition.locationType" autocomplete="off" />
        </el-form-item>
        <el-form-item label="仓位尺寸" :label-width="formLabelWidth">
          <el-input v-model="formPosition.locationSize" autocomplete="off" />
        </el-form-item>
        <el-form-item label="仓位承重限制" :label-width="formLabelWidth">
          <el-input v-model="formPosition.weightLimit" autocomplete="off" />
        </el-form-item>
        <el-form-item label="当前状态" :label-width="formLabelWidth">
          <el-radio-group v-model="formPosition.currentStatus" required>
            <el-radio :label="false">启用</el-radio>
            <el-radio :label="true">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="库位" :label-width="formLabelWidth">
          <el-select v-model="formPosition.storageAreaID" placeholder="请选择库位">
            <el-option
              v-for="area in storageAreaList"
              :key="area.storageAreaId"
              :label="area.storageAreaType"
              :value="area.storageAreaId"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addPositionDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveOrUpdatePosition">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox, ElLoading, ElTableColumn } from 'element-plus';
import axios from 'axios';

// 移除未使用的 useCounterStore 导入
const router = useRouter();

// 控制新增仓库对话框的显示与隐藏
const showAddDialog = ref(false);
const isEditWarehouse = ref(false);

// 表单验证规则（移除未使用的 processType/capacityBody/processPerson，保留实际用到的 category）
const rules = reactive({
  wareHouseName: [{ required: true, message: '请输入仓库名称', trigger: 'blur' }],
  category: [{ required: true, message: '请选择所属类别', trigger: 'change' }] // 新增 category 验证
});

// 仓库信息表单数据
const form = ref({
  wareHouseName: '',
  wareHouseNumber: '',
  warehouseAddress: '',
  category: '',
  remark: '',
  ourRepresentativesInfoFilled: false
});

// 表单 ref
const formRef = ref(null);

// 保存或更新仓库
const saveOrUpdateWarehouse = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      if (isEditWarehouse.value) {
        axios.post('https://localhost:44336/api/WarehouseManagement/UpdateWareHouse', form.value)
          .then((res) => {
            if (res.data.code === 400) {
              ElMessage.success('更新成功');
              showAddDialog.value = false;
              resetForm();
              fetchWarehouseList();
            } else {
              ElMessage.error('更新失败');
            }
          })
          .catch((error) => {
            ElMessage.error('更新时发生错误');
            console.error(error);
          });
      } else {
        axios.post('https://localhost:44336/api/WarehouseManagement/AddWareHouse', form.value)
          .then((res) => {
            if (res.data.code === 100) {
              ElMessage.success('保存成功');
              showAddDialog.value = false;
              resetForm();
              fetchWarehouseList();
            } else {
              ElMessage.error('保存失败');
            }
          })
          .catch((error) => {
            ElMessage.error('保存时发生错误');
            console.error(error);
          });
      }
    }
  });
};

// 我方代表相关
const ourRepresentativesList = ref([]);
const currentOurRepresentative = ref(null);
const ourRepresentativesDialogVisible = ref(false);

const AreaDialogVisible = ref(false);

// 库位信息列表相关
const storageAreaList = ref([]);
const currentStorageArea = ref(null);
const editStorageAreaDialogVisible = ref(false);
const editStorageAreaForm = ref({
  storageAreaId: null,
  storageAreaCode: '',
  storageAreaType: '',
  capacity: '',
  storageCondition: '',
  warehouseID: ''
});
const isEditStorageArea = ref(false);

// 打开库位选择对话框
const openOurRepresentativesDialog = () => {
  ourRepresentativesDialogVisible.value = true;
};

// 生命周期钩子
onMounted(() => {
  fetchBaseData();
  fetchWarehouseList();
});

// 获取基础数据（仓库类别）
const fetchBaseData = () => {
  axios.get('https://localhost:44384/api/WarehouseManagement/GetWareHouseType')
    .then((res) => (ourRepresentativesList.value = res.data.data || []))
    .catch((error) => {
      ElMessage.error('加载我方代表失败');
      console.error(error);
    });
};

// 处理我方代表选择
const handleOurRepresentativesChange = (val) => {
  currentOurRepresentative.value = val;
};

const pickOurRepresentatives = () => {
  if (currentOurRepresentative.value) {
    form.value.wareHouseName = currentOurRepresentative.value.wareHouseTypeName + '-';
    form.value.category = currentOurRepresentative.value.wareHouseTypeName;
    form.value.ourRepresentativesInfoFilled = true;
    ourRepresentativesDialogVisible.value = false;
  } else {
    ElMessage.warning('请选择一个所属类别');
  }
};

// 仓库列表相关
const warehouseList = ref([]);
const page = ref({ PageIndex: 1, PageSize: 50 });
const total = ref({ totalCount: 0 });
const queryParams = ref({ WareHouseName: '', WareHouseNumber: '', Category: '' });

// 仓库列表查询
const fetchWarehouseList = () => {
  axios.get('https://localhost:44384/api/WarehouseManagement/GetWareHouse', {
    params: {
      PageIndex: page.value.PageIndex,
      PageSize: page.value.PageSize,
      ...queryParams.value
    }
  })
    .then((res) => {
      warehouseList.value = res.data.data.result;
      total.value.totalCount = res.data.data.totalCount;
    })
    .catch((error) => {
      ElMessage.error('查询仓库列表失败');
      console.error(error);
    });
};

// 分页操作
const handleSizeChange = (val) => {
  page.value.PageSize = val;
  page.value.PageIndex = 1;
  fetchWarehouseList();
};

const handleCurrentChange = (val) => {
  page.value.PageIndex = val;
  fetchWarehouseList();
};

// 新增库位相关
const dialogFormVisible = ref(false);
const formLabelWidth = ref('120px');
const formStorageArea = ref({
  StorageAreaCode: '',
  StorageAreaType: '',
  Capacity: '',
  StorageCondition: '',
  WarehouseID: ''
});

const AddArea = () => {
  dialogFormVisible.value = true;
};

// 重置库位表单数据
const resetStorageAreaForm = () => {
  formStorageArea.value = {
    StorageAreaCode: '',
    StorageAreaType: '',
    Capacity: '',
    StorageCondition: '',
    WarehouseID: ''
  };
};

// 保存或更新库位
const saveOrUpdateStorageArea = () => {
  if (isEditStorageArea.value) {
    axios.post('https://localhost:44336/api/WarehouseManagement/UpdateStorageArea', formStorageArea.value)
      .then((res) => {
        if (res.data.code === 400) {
          ElMessage.success('更新成功');
          dialogFormVisible.value = false;
          if (selectedWarehouseId.value) {
            fetchStorageAreaList(selectedWarehouseId.value);
          }
        } else {
          ElMessage.error('更新失败');
        }
      })
      .catch((error) => {
        ElMessage.error('更新时发生错误');
        console.error(error);
      });
  } else {
    axios.post('https://localhost:44336/api/WarehouseManagement/AddStorageArea', formStorageArea.value)
      .then((res) => {
        if (res.data.code === 100) {
          ElMessage.success('库位保存成功');
          dialogFormVisible.value = false;
          resetStorageAreaForm();
          // 保存库位后更新当前仓库的库位信息
          if (selectedWarehouseId.value) {
            fetchStorageAreaList(selectedWarehouseId.value);
          }
        } else {
          ElMessage.error('库位保存失败');
        }
      })
      .catch((error) => {
        ElMessage.error('保存库位时发生错误');
        console.error(error);
      });
  }
};

// 选中的仓库 ID
const selectedWarehouseId = ref(null);

// 获取库位信息列表
const fetchStorageAreaList = (warehouseId) => {
  selectedWarehouseId.value = warehouseId;
  axios.get('https://localhost:44384/api/WareHouseManagement/GetStorageArea', {
    params: {
      warehouseId
    }
  })
    .then((res) => {
      storageAreaList.value = res.data.data || [];
    })
    .catch((error) => {
      ElMessage.error('查询库位信息列表失败');
      console.error(error);
    });
};

// 处理库位选择
const handleStorageAreaChange = (val) => {
  currentStorageArea.value = val;
};

// 关闭库位信息对话框并处理数据
const closeAreaDialogAndHandleData = () => {
  if (currentStorageArea.value) {
    // 这里可以添加处理选中库位信息的逻辑，比如传递给父组件等
    AreaDialogVisible.value = false;
  } else {
    ElMessage.warning('请选择一个库位');
  }
};

// 编辑库位信息
const handleStorageAreaEdit = (row) => {
  isEditStorageArea.value = true;
  dialogFormVisible.value = true;
  formStorageArea.value = {
    StorageAreaId: row.storageAreaId,
    StorageAreaCode: row.storageAreaCode,
    StorageAreaType: row.storageAreaType,
    Capacity: row.capacity,
    StorageCondition: row.storageCondition,
    WarehouseID: row.warehouseID
  };
};

// 删除仓位信息
const deletePosition = (row) => {
  ElMessageBox.confirm('确定要删除该仓位吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    axios.delete(`https://localhost:44336/api/WarehouseManagement/DelStorageLocation/${row.locationID}`)
      .then((res) => {
        if (res.data.code === 300) {
          ElMessage.success('删除仓位成功');
          if (selectedWarehouseId.value) {
            fetchStorageAreaList(selectedWarehouseId.value);
          }
        } else {
          ElMessage.error('删除仓位失败');
        }
      })
      .catch((error) => {
        ElMessage.error('删除时发生错误');
        console.error(error);
      });
  }).catch(() => ElMessage.info('已取消删除'));
};

// 删除库位
const handleStorageAreaDelete = (row) => {
  ElMessage.confirm('确定要删除该库位吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    axios.delete(`https://localhost:44336/api/WarehouseManagement/DelStorageArea/${row.storageAreaId}`)
      .then((res) => {
        if (res.data.code === 300) {
          ElMessage.success('删除成功');
          if (selectedWarehouseId.value) {
            fetchStorageAreaList(selectedWarehouseId.value);
          }
        } else {
          ElMessage.error('删除失败');
        }
      })
      .catch((error) => {
        ElMessage.error('删除时发生错误');
        console.error(error);
      });
  }).catch(() => ElMessage.info('已取消删除'));
};

// 操作按钮逻辑
const handleEdit = (wareHouseID) => {
  AreaDialogVisible.value = true;
  fetchStorageAreaList(wareHouseID);
};

// 删除仓库
const handleDelete = (row) => {
  ElMessage.confirm('确定要删除该仓库吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    axios.delete(`https://localhost:44336/api/WarehouseManagement/DelWareHouse/${row.wareHouseID}`)
      .then((res) => {
        if (res.data.code === 300) {
          ElMessage.success('删除成功');
          fetchWarehouseList();
        } else {
          ElMessage.error('删除失败');
        }
      })
      .catch((error) => {
        ElMessage.error('删除时发生错误');
        console.error(error);
      });
  }).catch(() => ElMessage.info('已取消删除'));
};

// 修改仓库
const handleUpdate = (row) => {
  isEditWarehouse.value = true;
  showAddDialog.value = true;
  form.value = { ...row };
};

// 重置表单
const resetForm = () => {
  form.value = {
    wareHouseName: '',
    wareHouseNumber: '',
    warehouseAddress: '',
    category: '',
    remark: '',
    ourRepresentativesInfoFilled: false
  };
};

// 新增仓位相关
const addPositionDialogVisible = ref(false);
const formPosition = ref({
  locationCode: "",
  locationType: "",
  locationSize: "",
  weightLimit: '',
  currentStatus: true,
  storageAreaID: '',
});
const isEditPosition = ref(false);

// 重置仓位表单数据
const resetPositionForm = () => {
  formPosition.value = {
    locationCode: "",
    locationType: "",
    locationSize: "",
    weightLimit: '',
    currentStatus: true,
    storageAreaID: '',
  };
};

const openAddPositionDialog = () => {
  addPositionDialogVisible.value = true;
};

// 保存或更新仓位
const saveOrUpdatePosition = () => {
  if (isEditPosition.value) {
    axios.post('https://localhost:44336/api/WarehouseManagement/UpdateStorageLocation', formPosition.value)
      .then((res) => {
        if (res.data.code === 400) {
          ElMessage.success('更新成功');
          addPositionDialogVisible.value = false;
          if (selectedWarehouseId.value) {
            fetchStorageAreaList(selectedWarehouseId.value);
          }
        } else {
          ElMessage.error('更新失败');
        }
      })
      .catch((error) => {
        ElMessage.error('更新时发生错误');
        console.error(error);
      });
  } else {
    axios.post('https://localhost:44336/api/WarehouseManagement/AddStorageLocation', formPosition.value)
      .then((res) => {
        if (res.data.code === 100) {
          ElMessage.success('仓位保存成功');
          addPositionDialogVisible.value = false;
          resetPositionForm();
        } else {
          ElMessage.error('仓位保存失败');
        }
      })
      .catch((error) => {
        ElMessage.error('保存仓位时发生错误');
        console.error(error);
      });
  }
};

// 查看仓位相关
const viewPositionDialogVisible = ref(false);
const positionList = ref([]);

const openViewPositionDialog = (row) => {
  viewPositionDialogVisible.value = true;
  // 模拟获取仓位信息，实际使用时需要替换为真实的接口请求
  axios.get('https://localhost:44384/api/WareHouseManagement/GetStorageLocation', {
    params: {
      storageAreaId: row.storageAreaId
    }
  })
    .then((res) => {
      positionList.value = res.data.data || [];
    })
    .catch((error) => {
      ElMessage.error('查询仓位信息失败');
      console.error(error);
    });
};

// 编辑仓位信息
const openEditPositionDialog = (row) => {
  isEditPosition.value = true;
  addPositionDialogVisible.value = true;
  formPosition.value = { ...row };
};
</script>

<style scoped>
.warehouse-list {
  padding: 20px;
}

.el-table {
  width: 100%;
}

.el-input__append {
  padding-right: 8px;
}

.outer-dialog .el-dialog__wrapper {
  z-index: 1000;
}

.inner-dialog .el-dialog__wrapper {
  z-index: 1001;
}

.dialog-buttons {
  margin-bottom: 10px;
}
</style>    